<template>
	<AdminLayout activeKey="rejected-content" :breadcrumbs="['首页','内容管控','内容复审管理']" tabTitle="内容复审管理" currentPage="rejected-content">
		<view class="page">
			<!-- 页面头部 -->
			<view class="page-header">
				<view class="header-info">
					<text class="page-title">内容复审管理</text>
					<text class="page-subtitle">管理和处理审核未通过的内容，支持恢复审核和删除操作</text>
				</view>
				<view class="header-actions">
					<button class="btn-secondary" @click="batchDelete">
						<text class="btn-icon iconfont icon-shanchu"></text>
						批量删除
					</button>
					<button class="btn-primary" @click="loadRejectedContent">
						<text class="btn-icon iconfont icon-shuaxin"></text>
						刷新
					</button>
				</view>
			</view>

			<!-- 统计卡片 -->
			<view class="stats-cards">
				<view class="stat-card">
					<text class="stat-number">{{ stats.total }}</text>
					<text class="stat-label">待处理内容</text>
				</view>
				<view class="stat-card">
					<text class="stat-number">{{ stats.tasks }}</text>
					<text class="stat-label">待审任务</text>
				</view>
				<view class="stat-card">
					<text class="stat-number">{{ stats.activities }}</text>
					<text class="stat-label">待审活动</text>
				</view>
				<view class="stat-card">
					<text class="stat-number">{{ stats.posts }}</text>
					<text class="stat-label">待审帖子</text>
				</view>
			</view>

			<!-- 筛选工具栏 -->
			<view class="filter-toolbar">
				<view class="filter-tabs">
					<button class="filter-tab" :class="{ active: typeFilter === 'all' }" @click="setTypeFilter('all')">
						全部 ({{ stats.total }})
					</button>
					<button class="filter-tab" :class="{ active: typeFilter === 'task' }" @click="setTypeFilter('task')">
						任务 ({{ stats.tasks }})
					</button>
					<button class="filter-tab" :class="{ active: typeFilter === 'activity' }" @click="setTypeFilter('activity')">
						活动 ({{ stats.activities }})
					</button>
					<button class="filter-tab" :class="{ active: typeFilter === 'post' }" @click="setTypeFilter('post')">
						帖子 ({{ stats.posts }})
					</button>
				</view>
				<view class="filter-row">
					<view class="search-box">
						<input class="search-input" v-model="searchKeyword" placeholder="搜索内容标题..." @input="onSearchInput" />
					</view>
					<picker mode="selector" :range="violationTypes" @change="onViolationTypeChange">
						<view class="picker-btn">
							{{ selectedViolationType || '违规类型' }}
						</view>
					</picker>
					<picker mode="selector" :range="sortOptions" @change="onSortChange">
						<view class="picker-btn">
							{{ selectedSortOption }}
						</view>
					</picker>
				</view>
			</view>

			<!-- 违规内容列表 -->
			<view class="content-list">
				<view v-for="item in filteredList" :key="item._id" class="content-item" :class="item.type">
					<view class="item-checkbox">
						<checkbox :value="item._id" :checked="selectedItems.includes(item._id)" @change="toggleSelect(item._id)" />
					</view>
					
					<view class="item-main">
						<view class="item-header">
							<view class="left-section">
								<view class="type-badge" :class="item.type">
									<text class="badge-icon iconfont" :class="getTypeIcon(item.type)"></text>
									<text>{{ getTypeName(item.type) }}</text>
								</view>
							<view class="violation-tag" :class="getViolationSeverity(item.violation_reason)">
								{{ item.violation_type || '待复审' }}
							</view>
							</view>
							<text class="reject-time">{{ formatTime(item.reject_time) }}</text>
						</view>

						<view class="item-content">
							<text class="item-title">{{ item.title }}</text>
							<text class="item-desc">{{ item.description || item.content }}</text>
							
						<view class="violation-reason">
							<view class="reason-header">
								<text class="reason-icon iconfont icon-jinggao"></text>
								<text class="reason-label">拒绝原因</text>
							</view>
							<text class="reason-text">{{ item.violation_reason || '未填写具体原因' }}</text>
						</view>

							<view class="item-meta">
								<text class="meta-item">
									<text class="iconfont icon-yonghu"></text>
									发布者：{{ item.publisher_name || '未知用户' }}
								</text>
								<text class="meta-item">
									<text class="iconfont icon-shenhe"></text>
									审核员：{{ item.auditor_name || '系统' }}
								</text>
								<text class="meta-item">
									<text class="iconfont icon-riqi"></text>
									拒绝时间：{{ formatDate(item.reject_time) }}
								</text>
							</view>
						</view>

						<view class="item-actions">
							<button class="action-btn btn-view" @click="viewDetail(item)">
								<text class="iconfont icon-chakan"></text>
								查看详情
							</button>
							<button class="action-btn btn-restore" @click="restoreContent(item)">
								<text class="iconfont icon-huifu"></text>
								恢复审核
							</button>
							<button class="action-btn btn-delete" @click="deleteContent(item)">
								<text class="iconfont icon-shanchu"></text>
								永久删除
							</button>
						</view>
					</view>
				</view>

			<!-- 空状态 -->
			<view v-if="filteredList.length === 0" class="empty-state">
				<text class="empty-icon iconfont icon-kongxinwenjian"></text>
				<text class="empty-text">暂无待复审内容</text>
				<text class="empty-desc">当前筛选条件下没有需要处理的内容</text>
			</view>
			</view>
		</view>
	</AdminLayout>
</template>

<script>
import AdminLayout from '@/components/AdminLayout.vue'

export default {
	components: { AdminLayout },
	data() {
		return {
			searchKeyword: '',
			typeFilter: 'all',
			selectedViolationType: '',
			selectedSortOption: '最新拒绝',
			selectedItems: [],
			violationTypes: ['全部类型', '虚假信息', '违法违规', '低俗内容', '垃圾广告', '侵权内容', '其他违规'],
			sortOptions: ['最新拒绝', '最早拒绝', '发布者', '违规类型'],
			stats: {
				total: 0,
				tasks: 0,
				activities: 0,
				posts: 0
			},
			rejectedList: [],
			loading: false
		}
	},
	computed: {
		filteredList() {
			let list = this.rejectedList
			
			// 按类型筛选
			if (this.typeFilter !== 'all') {
				list = list.filter(item => item.type === this.typeFilter)
			}
			
			// 按违规类型筛选
			if (this.selectedViolationType && this.selectedViolationType !== '全部类型') {
				list = list.filter(item => item.violation_type === this.selectedViolationType)
			}
			
			// 按关键词搜索
			if (this.searchKeyword) {
				const keyword = this.searchKeyword.toLowerCase()
				list = list.filter(item => 
					(item.title && item.title.toLowerCase().includes(keyword)) ||
					(item.description && item.description.toLowerCase().includes(keyword)) ||
					(item.content && item.content.toLowerCase().includes(keyword))
				)
			}
			
			// 排序
			if (this.selectedSortOption === '最新拒绝') {
				list = list.sort((a, b) => (b.reject_time || 0) - (a.reject_time || 0))
			} else if (this.selectedSortOption === '最早拒绝') {
				list = list.sort((a, b) => (a.reject_time || 0) - (b.reject_time || 0))
			} else if (this.selectedSortOption === '发布者') {
				list = list.sort((a, b) => (a.publisher_name || '').localeCompare(b.publisher_name || ''))
			} else if (this.selectedSortOption === '违规类型') {
				list = list.sort((a, b) => (a.violation_type || '').localeCompare(b.violation_type || ''))
			}
			
			return list
		}
	},
	onLoad() {
		this.loadRejectedContent()
	},
	methods: {
		async loadRejectedContent() {
			this.loading = true
			try {
				const res = await uniCloud.callFunction({
					name: 'initAdmin',
					data: {
						action: 'getRejectedContent'
					}
				})
				
				console.log('云函数返回:', res.result)
				
				if (res.result && res.result.code === 0) {
					const data = res.result.data || {}
					console.log('获取到的数据:', data)
					
					// 如果有任务数据，打印第一条任务的详细信息
					if (data.tasks && data.tasks.length > 0) {
						console.log('第一条任务数据:', data.tasks[0])
						console.log('audit_reason:', data.tasks[0].audit_reason)
						console.log('violation_reason:', data.tasks[0].violation_reason)
					}
					
					this.rejectedList = [
						...(data.tasks || []).map(task => ({ ...task, type: 'task' })),
						...(data.activities || []).map(activity => ({ ...activity, type: 'activity' })),
						...(data.posts || []).map(post => ({ ...post, type: 'post' }))
					]
					
					console.log('处理后的列表:', this.rejectedList)
					if (this.rejectedList.length > 0) {
						console.log('第一条处理后的数据:', this.rejectedList[0])
					}
					
					// 更新统计
					this.stats.tasks = data.tasks?.length || 0
					this.stats.activities = data.activities?.length || 0
					this.stats.posts = data.posts?.length || 0
					this.stats.total = this.rejectedList.length
					
					uni.showToast({ 
						title: `加载成功，共${this.stats.total}条记录`, 
						icon: 'success' 
					})
				} else {
					console.error('返回错误:', res.result)
					uni.showToast({ title: res.result?.msg || '加载失败', icon: 'none' })
				}
			} catch (e) {
				console.error('加载违规内容失败:', e)
				uni.showToast({ title: '加载失败：' + e.message, icon: 'none' })
			} finally {
				this.loading = false
			}
		},
		
		setTypeFilter(type) {
			this.typeFilter = type
		},
		
		onSearchInput() {
			// 实时搜索
		},
		
		onViolationTypeChange(e) {
			this.selectedViolationType = this.violationTypes[e.detail.value]
		},
		
		onSortChange(e) {
			this.selectedSortOption = this.sortOptions[e.detail.value]
		},
		
		toggleSelect(id) {
			const index = this.selectedItems.indexOf(id)
			if (index > -1) {
				this.selectedItems.splice(index, 1)
			} else {
				this.selectedItems.push(id)
			}
		},
		
		viewDetail(item) {
		// 显示详情弹窗或跳转到详情页
		uni.showModal({
			title: '内容详情',
			content: `标题: ${item.title}\n\n内容: ${item.description || item.content || '无'}\n\n拒绝原因: ${item.violation_reason || '未填写'}`,
			confirmText: '关闭'
			})
		},
		
		async restoreContent(item) {
			uni.showModal({
				title: '恢复审核',
				content: '确定要将此内容恢复到待审核状态吗？',
				success: async (res) => {
					if (res.confirm) {
						try {
							const result = await uniCloud.callFunction({
								name: 'initAdmin',
								data: {
									action: 'restoreRejectedContent',
									contentType: item.type,
									contentId: item._id
								}
							})
							
							if (result.result && result.result.code === 0) {
								uni.showToast({ title: '恢复成功', icon: 'success' })
								this.loadRejectedContent()
							} else {
								uni.showToast({ title: result.result?.msg || '恢复失败', icon: 'none' })
							}
						} catch (e) {
							console.error('恢复失败:', e)
							uni.showToast({ title: '恢复失败', icon: 'none' })
						}
					}
				}
			})
		},
		
		async deleteContent(item) {
			uni.showModal({
				title: '永久删除',
				content: '确定要永久删除此内容吗？此操作不可恢复！',
				confirmText: '删除',
				confirmColor: '#dc2626',
				success: async (res) => {
					if (res.confirm) {
						try {
							const result = await uniCloud.callFunction({
								name: 'initAdmin',
								data: {
									action: 'deleteRejectedContent',
									contentType: item.type,
									contentId: item._id
								}
							})
							
							if (result.result && result.result.code === 0) {
								uni.showToast({ title: '删除成功', icon: 'success' })
								this.loadRejectedContent()
							} else {
								uni.showToast({ title: result.result?.msg || '删除失败', icon: 'none' })
							}
						} catch (e) {
							console.error('删除失败:', e)
							uni.showToast({ title: '删除失败', icon: 'none' })
						}
					}
				}
			})
		},
		
		batchDelete() {
			if (this.selectedItems.length === 0) {
				uni.showToast({ title: '请先选择要删除的内容', icon: 'none' })
				return
			}
			
			uni.showModal({
				title: '批量删除',
				content: `确定要永久删除选中的 ${this.selectedItems.length} 条内容吗？`,
				confirmText: '删除',
				confirmColor: '#dc2626',
				success: (res) => {
					if (res.confirm) {
						// 批量删除逻辑
						uni.showToast({ title: '批量删除功能开发中', icon: 'none' })
					}
				}
			})
		},
		
		getTypeName(type) {
			const names = {
				task: '任务',
				activity: '活动',
				post: '帖子'
			}
			return names[type] || type
		},
		
		getTypeIcon(type) {
			const icons = {
				task: 'icon-renwu',
				activity: 'icon-huodong',
				post: 'icon-quanzi'
			}
			return icons[type] || 'icon-wenjian'
		},
		
		getViolationSeverity(reason) {
			if (!reason) return 'low'
			const severityKeywords = {
				high: ['违法', '诈骗', '色情', '暴力'],
				medium: ['虚假', '侵权', '低俗'],
				low: ['广告', '垃圾', '其他']
			}
			
			for (let level in severityKeywords) {
				if (severityKeywords[level].some(keyword => reason.includes(keyword))) {
					return level
				}
			}
			return 'low'
		},
		
		formatTime(timestamp) {
			if (!timestamp) return '-'
			const date = new Date(timestamp)
			const now = new Date()
			const diff = now - date
			
			if (diff < 3600000) return Math.floor(diff / 60000) + '分钟前'
			if (diff < 86400000) return Math.floor(diff / 3600000) + '小时前'
			if (diff < 604800000) return Math.floor(diff / 86400000) + '天前'
			
			return this.formatDate(timestamp)
		},
		
		formatDate(timestamp) {
			if (!timestamp) return '-'
			const date = new Date(timestamp)
			return date.toLocaleDateString('zh-CN')
		}
	}
}
</script>

<style scoped>
.page {
	padding: 32rpx;
	background: #f8fafc;
	min-height: 100vh;
}

/* 页面头部 */
.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32rpx;
}

.header-info .page-title {
	font-size: 48rpx;
	font-weight: 700;
	color: #1a202c;
	margin-bottom: 8rpx;
	display: block;
}

.header-info .page-subtitle {
	font-size: 28rpx;
	color: #718096;
	display: block;
}

.header-actions {
	display: flex;
	gap: 16rpx;
}

.btn-primary, .btn-secondary {
	display: flex;
	align-items: center;
	gap: 8rpx;
	border: none;
	border-radius: 16rpx;
	padding: 20rpx 32rpx;
	font-size: 28rpx;
	font-weight: 500;
	transition: all 0.2s ease;
}

.btn-primary {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: #fff;
	box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
}

.btn-secondary {
	background: #fff;
	color: #dc2626;
	border: 2rpx solid #dc2626;
}

.btn-icon {
	font-size: 28rpx;
}

/* 统计卡片 */
.stats-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24rpx;
	margin-bottom: 32rpx;
}

.stat-card {
	background: #fff;
	border-radius: 20rpx;
	padding: 32rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	border: 2rpx solid #f1f5f9;
}

.stat-number {
	font-size: 48rpx;
	font-weight: 800;
	color: #1a202c;
	display: block;
	margin-bottom: 8rpx;
}

.stat-label {
	font-size: 26rpx;
	color: #718096;
}

/* 筛选工具栏 */
.filter-toolbar {
	background: #fff;
	border-radius: 20rpx;
	padding: 24rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	border: 2rpx solid #f1f5f9;
}

.filter-tabs {
	display: flex;
	gap: 16rpx;
	margin-bottom: 24rpx;
	padding-bottom: 0;
	border-bottom: none;
}

.filter-tab {
	padding: 16rpx 32rpx;
	background: #fff;
	color: #333;
	border: 1rpx solid #e2e8f0;
	border-radius: 8rpx;
	font-size: 28rpx;
	font-weight: 400;
	transition: all 0.2s ease;
	flex-shrink: 0;
	white-space: nowrap;
	margin: 0;
	line-height: 1;
	display: inline-block;
}

.filter-tab::after {
	border: none;
}

.filter-tab.active {
	background: #3b82f6;
	color: #fff;
	border-color: #3b82f6;
}

.filter-row {
	display: flex;
	gap: 16rpx;
	align-items: center;
	justify-content: flex-start;
}

.search-box {
	flex: 1;
	max-width: 500rpx;
	display: flex;
	align-items: center;
	background: #f8fafc;
	border-radius: 16rpx;
	padding: 16rpx 24rpx;
	border: 2rpx solid #e2e8f0;
}

.search-input {
	flex: 1;
	font-size: 28rpx;
	color: #1a202c;
	background: transparent;
	border: none;
}

.picker-btn {
	display: flex;
	align-items: center;
	padding: 16rpx 24rpx;
	background: #f8fafc;
	color: #64748b;
	border: 2rpx solid #e2e8f0;
	border-radius: 16rpx;
	font-size: 26rpx;
	white-space: nowrap;
	min-width: 160rpx;
	justify-content: center;
}

/* 内容列表 */
.content-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.content-item {
	background: #fff;
	border-radius: 20rpx;
	padding: 32rpx;
	display: flex;
	gap: 24rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	border: 2rpx solid #f1f5f9;
	transition: all 0.3s ease;
}

.content-item:hover {
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}

.item-checkbox {
	flex-shrink: 0;
	padding-top: 8rpx;
}

.item-main {
	flex: 1;
	min-width: 0;
}

.item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.left-section {
	display: flex;
	gap: 12rpx;
	align-items: center;
}

.type-badge {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
	font-size: 24rpx;
	font-weight: 600;
}

.type-badge.task {
	background: #fef3c7;
	color: #d97706;
}

.type-badge.activity {
	background: #dbeafe;
	color: #2563eb;
}

.type-badge.post {
	background: #d1fae5;
	color: #059669;
}

.violation-tag {
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
	font-size: 24rpx;
	font-weight: 600;
}

.violation-tag.high {
	background: #fee2e2;
	color: #dc2626;
}

.violation-tag.medium {
	background: #fef3c7;
	color: #d97706;
}

.violation-tag.low {
	background: #f3f4f6;
	color: #6b7280;
}

.reject-time {
	font-size: 24rpx;
	color: #94a3b8;
}

.item-content {
	margin-bottom: 24rpx;
}

.item-title {
	font-size: 32rpx;
	font-weight: 700;
	color: #1a202c;
	margin-bottom: 12rpx;
	display: block;
}

.item-desc {
	font-size: 26rpx;
	color: #64748b;
	line-height: 1.6;
	margin-bottom: 16rpx;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.violation-reason {
	background: #fef2f2;
	border-left: 4rpx solid #dc2626;
	border-radius: 8rpx;
	padding: 16rpx;
	margin-bottom: 16rpx;
}

.reason-header {
	display: flex;
	align-items: center;
	gap: 8rpx;
	margin-bottom: 8rpx;
}

.reason-icon {
	font-size: 24rpx;
	color: #dc2626;
}

.reason-label {
	font-size: 24rpx;
	font-weight: 600;
	color: #dc2626;
}

.reason-text {
	font-size: 26rpx;
	color: #991b1b;
	line-height: 1.6;
}

.item-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24rpx;
	padding-top: 16rpx;
	border-top: 2rpx solid #f1f5f9;
}

.meta-item {
	display: flex;
	align-items: center;
	gap: 8rpx;
	font-size: 24rpx;
	color: #64748b;
}

.item-actions {
	display: flex;
	gap: 12rpx;
}

.action-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
	padding: 16rpx 24rpx;
	border-radius: 12rpx;
	font-size: 26rpx;
	font-weight: 600;
	border: none;
	transition: all 0.2s ease;
}

.btn-view {
	background: #f8fafc;
	color: #64748b;
	border: 2rpx solid #e2e8f0;
}

.btn-restore {
	background: #dbeafe;
	color: #2563eb;
}

.btn-delete {
	background: #fee2e2;
	color: #dc2626;
}

/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 120rpx 40rpx;
	background: #fff;
	border-radius: 20rpx;
	border: 2rpx solid #f1f5f9;
}

.empty-icon {
	font-size: 120rpx;
	color: #cbd5e1;
	margin-bottom: 24rpx;
}

.empty-text {
	font-size: 32rpx;
	font-weight: 600;
	color: #64748b;
	margin-bottom: 12rpx;
}

.empty-desc {
	font-size: 26rpx;
	color: #94a3b8;
}

/* 响应式 */
@media (max-width: 900px) {
	.stats-cards {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.content-item {
		flex-direction: column;
	}
	
	.filter-row {
		flex-wrap: wrap;
	}
}
</style>

